﻿@{
    ViewBag.Title = "没想好";
    var F = Html.F();
}

@section head {
    <style>
        :root {
            --round-size: 24rem;
        }

        body.f-body {
            overflow: hidden;
            padding: 0px;
        }
        /*背景 渐变部分*/
        .login-bg {
            height: 100vh;
            width: 100vw;
            background: linear-gradient(180deg, #02aab0,#00cdac );
        }

        /*白色部分*/
        .login-bg:before {
            content: "";
            position: absolute;
            right: -25%;
            top: -15%;
            height: 300%;
            width: 100%;
            background: #fff;
            transform: rotate(25deg);
        }

        /*圆圈*/
        .round {
            position: absolute;
            top: 30%;
            left: 30%;
            width: var(--round-size);
            height: var(--round-size);
            border-radius: 50%;
            background: #00cdac;
            display: grid;
            justify-content: center;
            opacity: 0;
            animation-delay: .5s;
            animation-duration: .6s;
            animation-name: zoomIn1;
            animation-fill-mode: both;
        }

        /*小电脑*/
        .round:before {
            content: "";
            --r-size: 6rem;
            width: calc(var(--round-size) - var(--r-size));
            height: calc(var(--round-size) - var(--r-size));
            /* border-radius: 50%;
            background: #02aab0;*/
            background-image: url('login/电脑1.png');
            background-size: 100%;
            margin: auto;
            opacity: 0;
            animation-delay: .7s;
            animation-duration: .4s;
            animation-name: zoomIn2;
            animation-fill-mode: both;
        }

        /*圆圈动画*/
        @@keyframes zoomIn1 {
            from {
                opacity: 0;
                transform: scale3d(.3, .3, .3);
            }

            70% {
                transform: scale3d(1.2, 1.2, 1.2);
            }

            100% {
                transform: scale3d(1, 1, 1);
                opacity: 1;
            }
        }
        /*小电脑动画*/
        @@keyframes zoomIn2 {
            from {
                opacity: 0;
                transform: scale3d(.3, .3, .3);
            }

            100% {
                opacity: .8;
            }
        }
        /*小图标 图层*/
        .icon-div, .icon-div-copy {
            position: absolute;
            top: 30%;
            left: 30%;
            width: var(--round-size);
            height: var(--round-size);
        }
        /*图标*/
        .icon {
            background-color: #fff;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 80%;
            width: 5rem;
            height: 5rem;
            position: absolute;
            animation-duration: .4s;
            animation-name: fadeInUp;
            animation-fill-mode: both;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        }

        .icon1 {
            background-image: url('login/图标/1.png');
            top: 41%;
            left: -15%;
            animation-delay: 1.2s;
        }

        .icon2 {
            background-image: url('login/图标/2.png');
            top: -3%;
            left: 3%;
            animation-delay: 1.4s;
        }

        .icon3 {
            background-image: url('login/图标/3.png');
            top: -1%;
            left: 42%;
            animation-delay: 1.5s;
        }

        .icon4 {
            background-image: url('login/图标/4.png');
            top: 15%;
            left: 84%;
            animation-delay: 1.7s;
        }
        /*图标进入*/
        @@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translate3d(0, 30%, 0);
            }

            99% {
                opacity: 1;
            }
            /*进入后隐藏 由copy 继续动画*/
            100% {
                opacity: 0;
            }
        }
        /*copy图层*/
        .icon-div-copy .icon {
            opacity: 0;
            animation: updown 1.5s infinite ease-in-out;
            animation-direction: alternate;
        }
        /*延迟进入*/
        .icon-div-copy .icon1 {
            animation-delay: 1.5s;
        }

        .icon-div-copy .icon2 {
            animation-delay: 1.7s;
        }

        .icon-div-copy .icon3 {
            animation-delay: 1.8s;
        }

        .icon-div-copy .icon4 {
            animation-delay: 2.09s;
        }
        /*copy图标来回动*/
        @@keyframes updown {
            from {
                opacity: 1;
                transform: translate3d(0, 0%, 0);
            }

            1% {
                opacity: 1;
                transform: translate3d(0, 0%, 0);
            }

            100% {
                opacity: 1;
                transform: translate3d(0, -10%, 0);
            }
        }
    </style>

    <style>
        /*表单*/
        .form {
            position: absolute;
            right: 10vw;
            top: 20%;
            animation-duration: .8s;
            animation-delay: .5s;
            animation-name: fadeInRight;
            animation-fill-mode: both;
            animation-timing-function: ease-in;
        }
        /*标题*/
        .form #title {
            color: #02aab0;
            font-size: 4rem;
            font-weight: 600;
            letter-spacing: 6px;
            line-height: 4rem;
        }

        .form #title .f-field-label {
            line-height: 4rem;
        }
        /*输入框*/
        .form .f-field-body.f-widget-content {
            background-color: #fff;
            border-color: #02aab0;
        }

        .form input {
            color: #333 !important;
            font-size: 1.5rem;
            line-height: 3rem;
            text-indent: 6px;
        }
        /*登录按钮*/
        .form #btnlogin2 {
            width: 100%;
            height: 4rem;
            border: none;
            background: linear-gradient(90deg, #02aab0,#00cdac );
        }

        .form #btnlogin2 .f-btn-text {
            line-height: 3rem;
            font-size: 1.5rem;
            margin: 0;
            text-indent: 1rem;
            letter-spacing: 1rem;
            color: #fff;
        }
        /*表单进入动画*/
        @@keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translate3d(30%, 0, 0);
            }

            to {
                opacity: 1;
                transform: none;
            }
        }
    </style>

}

@section body {
    <div class="login-bg">
        <div class="round">
        </div>
        <div class="icon-div">
            <div class="icon icon1"></div>
            <div class="icon icon2"></div>
            <div class="icon icon3"></div>
            <div class="icon icon4"></div>
        </div>
        <div class="icon-div-copy">
            <div class="icon icon1"></div>
            <div class="icon icon2"></div>
            <div class="icon icon3"></div>
            <div class="icon icon4"></div>
        </div>
    </div>
    <div class="form">
        @(
            F.SimpleForm().ID("form2").BoxFlex(2)
            .ShowBorder(false).ShowHeader(false)
            .LabelAlign(LabelAlign.Top).LabelSeparator("&nbsp;&nbsp;&nbsp;")
            .Items(
                F.Label().ID("title").Text("后台管理系统"),
                F.TextBox().ID("username").Label("用户名").EmptyText("请输入用户名"),
                F.TextBox().ID("userpwd").Label("密码").EmptyText("请输入密码"),
                F.Button()
                .MarginTop(20)
                .ID("btnlogin2").Text("登录")
                )
    )
    </div>
}

@section script {
    <script>
        F.ready(function () {
        });
    </script>
}